:host {
  display: block;
}

.demo-step {

  .demo-step-up {
    width: 0;
    height: 0;
    border-top: 5px solid black;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
  }

  .demo-step-down {
    width: 0;
    height: 0;
    border-bottom: 5px solid black;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
  }

  .demo-step-middle {
    width: 100%;
    display: flex;

    > * {
      border-radius: 5px;
    }

    .demo-step-left {
      display: inline-block;
      background: #3AA349;
      width: 80%;
      height: 5px;
      margin-right: 1px;
    }

    .demo-step-center {
      display: inline-block;
      background: #EDCF08;
      width: 15%;
      height: 5px;
      margin-left: 1px;
      margin-right: 1px;
    }

    .demo-step-right {
      display: inline-block;
      background: #D63749;
      width: 5%;
      height: 5px;
      margin-left: 1px;
    }
  }

}
